<template>
  <el-drawer title="进程详情" v-model="show" size="768px" append-to-body>
    <app-info
      :title="group.label"
      v-for="(group, key) in infoList"
      :key="key"
      label-width="130px"
      :column="group.column || 2"
    >
      <app-info-item :label="item.label" v-for="(item, key) in group.data" :key="key">
        <template v-if="item.label == '告警等级'">
          <SecurityLevel :status="item.value" />
        </template>
        <template v-else>
          {{ item.value }}
        </template>
      </app-info-item>
    </app-info>
  </el-drawer>
</template>

<script setup>
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: Object,
})

const show = computed({
  get: () => props.modelValue,
  set: val => emits('update:modelValue', val),
})

const infoList = computed(() => {
  const { data } = props
  const infos = [
    { label: '进程ID', value: data.pid },
    { label: '进程名称', value: data.comm },
    { label: '执行路径', value: data.exe || '—' },
    { label: '命令行参数', value: data.argv || '—' },
    { label: '用户', value: data.username || '—' },
  ]

  return [
    {
      // label: '告警信息',
      data: infos,
      column: 1,
    },
  ]
})
</script>

<style lang="scss" scoped></style>
